<template>
  <div class="vux-x-dialog weui_dialog_alert fix_ios_fixed" @touchmove="onTouchMove">
    <transition name="vux-mask">
      <div class="weui_mask" @click="hideOnBlur && (currentValue = false)" v-show="currentValue"></div>
    </transition>
    <input style="display:none" v-model="currentValue">
    <transition name="vux-dialog">
      <div class="weui_dialog" v-show="currentValue" >
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    maskTransition: {
      type: String,
      default: 'vux-fade'
    },
    dialogTransition: {
      type: String,
      default: 'vux-dialog'
    },
    hideOnBlur: Boolean,
    scroll: {
      type: Boolean,
      default: true
    }
  },
  created () {
    if (typeof this.value !== 'undefined') {
      this.currentValue = this.value
    }
  },
  watch: {
    value (val) {
      this.currentValue = val
    },
    currentValue (val) {
      this.$emit(val ? 'on-show' : 'on-hide')
      this.$emit('input', val)
    }
  },
  data () {
    return {
      currentValue: false
    }
  },
  methods: {
    onTouchMove: function (event) {
      !this.scroll && event.preventDefault()
    }
  }
}
</script>

<style lang="less">
@import '../../assets/styles/components/transition.less';
@import '../../assets/styles/components/weui/widget/weui_tips/weui_mask.less';
@import '../../assets/styles/components/weui/widget/weui_tips/weui_dialog.less';
</style>
